<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">

  <button onclick="render(this.innerHTML)">N350PPS</button>
  <button onclick="render(this.innerHTML)">N300PPS</button>
  <button onclick="render(this.innerHTML)">N300L</button>
  <button onclick="render(this.innerHTML)">N310</button>
  
  <div id="monthly_chart" style="height: 50%;width: 100%;float: left;"></div>
  <div id="daily_chart" style="height: 50%; width: 100%;float: left;"></div>


  <script type="text/javascript" src="./js/echarts.min.js"></script>
  <script type="text/javascript" src="./js/entire-car.js"></script>
  <script type="text/javascript" src="./js/utils.js"></script>

  <script type="text/javascript">
    function render(type){

    
    var year = new Date().getFullYear();
    var month = new Date().getMonth() + 1;

    var dailyChart = echarts.init(document.querySelector('#daily_chart'));
    var monthlyChart = echarts.init(document.querySelector('#monthly_chart'));

    /**
     * Get Test Data for box plot charts
     * @param {array} dateArray [year,month] array
     * @param {number} mean mean value of the distribution
     * @param {number} err standard err value of the distribution
     */
    function getTestData(dateArray, mean, err) {
      let data = [];
      let year = dateArray[0];
      let month = dateArray[1];
      let dates = dateArray.length == 1 ? getAllMonth(year) : getAllDateInMonth(year, month);
      for (date of dates) {
        let singleDateData = [];
        for (let i = 0; i < 480; i++)
          singleDateData.push(generateNormalDistribution(mean, err));
        data.push(singleDateData);
      }
      return { dates, data };
    }
    /**
     * Get average data from data array
     * @param {array} data data array
     */
    function getAverageData(data) {
      let dates = data.dates;
      let averageData = data.data.map(d => d.reduce((a, b) => Number(a) + Number(b), 0) / d.length);
      averageData = averageData.map(item=>{return Number(item.toFixed(2))});
      return { dates, averageData };
    }

    /**
     * Update daily chart
     * @param {array} dataArray date array that contains year & month
     * @param {object} chart 
     */
     function updateChart(params) {
      let date = new Date(params.name);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let dateArray = [year, month];
      let dailyDatas = getTestData(dateArray, 0.5, 0.16);
      let testDailyDates = dailyDatas.dates; //for xAxis
      let averageDailyData = getAverageData(dailyDatas).averageData;//for line chart yAxis
      dailyChartOption = getLinePlotOption(`${year}年${month}月${type}每日整车过线前轮外倾预测`, "外倾角°", testDailyDates, averageDailyData, -0.5, 2,-0.083,1.416);
      dailyChart.setOption(dailyChartOption);
    }

    let dailyDatas = getTestData([year, month], 0.5, 0.16);
    let testDailyDates = dailyDatas.dates;
    let averageDailyData = getAverageData(dailyDatas).averageData;
    
    let monthlyDatas = getTestData([year], 0.5, 0.16);
    let testMonthlyDates = monthlyDatas.dates;
    let averageMonthlyData = getAverageData(monthlyDatas).averageData;
    
    dailyChartOption = getLinePlotOption(`${year}年${month}月${type}每日整车过线前轮外倾预测`, "外倾角°", testDailyDates, averageDailyData, -0.5, 2,-0.083,1.416);
    monthlyChartOption = getLinePlotOption(`${year}年${type}每月整车过线前轮外倾预测`, '外倾角', testMonthlyDates, averageMonthlyData, -0.5, 2,-0.083,1.416);

    dailyChart.setOption(dailyChartOption);
    monthlyChart.setOption(monthlyChartOption);

    monthlyChart.on('click', (params) => {
      console.log(params.name);
      updateChart(params);
    });

    window.addEventListener('resize', dailyChart.resize);
    window.addEventListener('resize', monthlyChart.resize);
  }
  window.onload = render('N350PPS');
  </script>
</body>

</html>